<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>中间部分组件</title>
</head>
<body>

<div th:fragment="msg_01 (status,msg,url)" class="container">
    <style>
        .myfont {
            font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
        }
        .lightBlue{
            background-color: #FAFDFF;
            border: 1px solid #A6BFDE;
        }
        .text-success.myfont {
            font-size: 35px;
        }
        .fail.myfont {
            font-size: 35px;
            color: orange;
        }
    </style>
    <div class="row">
        <div class="col-md-10 col-md-push-1 lightBlue">
            <div class="panel-heading" style="padding-bottom: 20px; padding-top: 20px">
                <input type="hidden" th:value="${url}" id="url_01">
                <center>
                    <div th:if="${status eq 1}" class='text-success myfont' th:text="${msg}">
                    </div>
                    <div th:if="${status eq 2||status eq 0}" class='fail myfont' th:text="${msg}">
                    </div>
                </center>
            </div>
        </div>
    </div>

    <br>
    <div class="row">
        <div class="col-md-6 col-md-push-4">
            <a style="text-decoration: none;color: gray;" th:href="@{/index}" >
                <h4>
                    在 <strong><span id="second" style="color: orange">5</span></strong> 秒后会自动跳到首页, 若没有跳动请点击首页
                </h4>
            </a>
        </div>
    </div>
    <script>
        /**
         * 倒计时跳转方法
         */
        function count() {
            let second = $('#second');
            let s = 4;
            let t1 = window.setInterval(function(){
                second.html(s);
                s--;
                if(s === -1){
                    window.clearInterval(t1)
                    window.location.href = $('#url_01').val();//到时跳转
                }
            },1000);
        }

        $(function () {
            //加载好页面后开始倒计时跳转
            count();
        })
    </script>
</div>

</body>
</html>